<template>
  <div class="m-wrap">
    <div class="m-container">
      <el-breadcrumb
        class="m-breadcrumb"
        separator="/"
      >
        <el-breadcrumb-item>CPA数据管理</el-breadcrumb-item>
        <el-breadcrumb-item>业务清单导出</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="m-content">
        <el-form inline>
          <el-form-item>
            <el-date-picker
              v-model="searchDate"
              type="daterange"
              format="yyyy/MM/dd"
              value-format="yyyy-MM-dd"
              placeholder="选择日期范围"
              :picker-options="$store.state.pickerOptions2"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-input
              v-model="searchParams.customer"
              placeholder="请输入客户名称或主体"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-input
              v-model="searchParams.product"
              placeholder="请输入产品名称"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-input
              v-model="searchParams.channel"
              placeholder="请输入渠道名称或主体"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-input
              v-model="searchParams.customerMemo"
              placeholder="请输入客户结算单备注"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-input
              v-model="searchParams.channelMemo"
              placeholder="请输入渠道结算单备注"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              @click="getTableData"
            >查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              @click="exportBusinessList"
            >导出</el-button>
          </el-form-item>
        </el-form>
        <el-table
          :data="tableData"
          v-loading="tableLoading"
          element-loading-text="拼命加载中"
          :empty-text="tableEmptyText"
          border
        >
          <el-table-column
            v-for="(item, index) in tableColumn"
            align="center"
            :fixed="index === 0"
            :key="index"
            :prop="item.prop"
            :label="item.label"
            :width="item.width"
            :sortable="item.sortable"
          />
        </el-table>
        <!-- 接口还不支持分页 -->
        <el-pagination
          style="display: none"
          class="m-pagination"
          background
          :layout="pagination.layout"
          :page-sizes="pagination.pageSizes"
          :page-size.sync="pagination.pageSize"
          @size-change="paginationSizeChange"
          :current-page.sync="pagination.currentPage"
          @current-change="paginationCurrentChange"
          :total="pagination.total"
        />
      </div>
    </div>
  </div>
</template>

<script>
/* eslint-disable */
export default {
  data() {
    return {
      // 选择日期
      searchDate: null,
      // 搜索字段
      searchParams: {
        channel: "",
        channelMemo: "",
        customer: "",
        customerMemo: "",
        endDate: "",
        product: "",
        startDate: ""
      },
      //   表格
      tableColumn: [
        {
          label: "渠道账目周期",
          width: 200,
          prop: "dateCycle"
        },
        {
          label: "客户名称",
          width: 200,
          prop: "cunstomerName"
        },
        {
          label: "客户主体",
          width: 200,
          prop: "cunstomerFullName"
        },
        {
          label: "产品名称",
          width: 150,
          prop: "productName"
        },
        {
          label: "上游渠道号",
          width: 150,
          prop: "productChannelCode"
        },
        {
          label: "客户单价(元)",
          width: 150,
          prop: "customerPrice",
          sortable: true
        },
        {
          label: "客户结算量",
          width: 150,
          prop: "customerSettle",
          sortable: true
        },
        {
          label: "客户收入金额(元)",
          width: 150,
          prop: "customerAmount",
          sortable: true
        },
        {
          label: "客户结算单备注",
          width: 300,
          prop: "customerMemo"
        },
        {
          label: "渠道名称",
          width: 150,
          prop: "channelName"
        },
        {
          label: "渠道主体",
          width: 150,
          prop: "channelFullName"
        },
        {
          label: "渠道单价(元)",
          width: 150,
          prop: "channelPrice",
          sortable: true
        },
        {
          label: "渠道结算量",
          width: 150,
          prop: "channelSettle"
        },
        {
          label: "渠道收入金额(元)",
          width: 150,
          prop: "channelAmount",
          sortable: true
        },
        {
          label: "渠道结算单备注",
          width: 300,
          prop: "channelMemo"
        }
      ],
      tableData: [],
      tableLoading: false,
      tableEmptyText: "暂无数据",
      //   分页
      pagination: {
        layout: "total, prev, pager, next, sizes",
        pageSize: 20,
        pageSizes: [20, 50, 100, 200, 500],
        currentPage: 1,
        total: 0
      }
    };
  },
  methods: {
    // 导出xls
    export2Excel(th, data, fileName) {
      const { export_json_to_excel } = require("@/vendor/Export2Excel");
      export_json_to_excel(th, data, fileName);
    },
    // 导出业务清单
    exportBusinessList() {
      if (!this.tableData.length) {
        return this.$message({
          type: "info",
          message: "亲，没有可导出数据！"
        });
      }
      const th = this.getArrayProp(this.tableColumn, "label");
      const prop = this.getArrayProp(this.tableColumn, "prop");
      const data = this.getExportTableData(this.tableData, prop);
      const fileName = this.getExportTableFileName();
      this.export2Excel(th, data, fileName);
    },
    // 个位补0
    fillZero(v) {
      return v.toString().replace(/^(\d)$/, "0$1");
    },
    // 获取数组某属性
    getArrayProp(data, prop) {
      let ret = [];
      data.forEach(item => {
        ret.push(item[prop]);
      });
      return ret;
    },
    // 获取导出表格数据
    getExportTableData(data, filter) {
      return data.map(v => filter.map(j => v[j]));
    },
    // 获取导出表格名字
    getExportTableFileName() {
      const date = new Date();
      return "业务清单-" + this.getFormatDate(date).join("");
    },
    // 获取表格数据
    getTableData() {
      if (!this.searchDate || !this.searchDate[0]) {
        return this.$message({
          type: "info",
          message: "请选择日期范围"
        });
      }
      this.tableLoading = true;
      this.$http({
        method: "post",
        url: "/cpa/api/customer_channel/search",
        data: Object.assign({}, this.searchParams, {
          startDate: this.getFormatDate(this.searchDate[0]).join("-"),
          endDate: this.getFormatDate(this.searchDate[1]).join("-")
          // limit: this.pagination.pageSize,
          // offset: this.pagination.currentPage
        })
      })
        .then(res => {
          this.tableLoading = false;
          // 成功 - -!
          if (res.data.status === 1) {
            this.tableData = res.data.list;
          } else {
            this.tableData = [];
            this.tableEmptyText = res.data.msg;
          }
        })
        .catch(err => {
          this.tableLoading = false;
          this.tableEmptyText = "服务异常，请稍后再试";
        });
    },
    /// 分页
    // 每页展示多少条改变
    paginationSizeChange(size) {
      this.pagination.pageSize = size;
      this.getTableData();
    },
    // 当前页改变
    paginationCurrentChange(current) {
      this.pagination.currentPage = current;
      this.getTableData();
    },
    // 获取日期范围简单格式
    getFormatDate(date) {
      return [
        date.getFullYear(),
        this.fillZero(date.getMonth() + 1),
        this.fillZero(date.getDate())
      ];
    },
    // 初始化日期范围
    initSearchDate() {
      let date = new Date();
      let startDate = new Date(
        date.getFullYear(),
        date.getMonth() - 1,
        date.getDate()
      );
      return [startDate, date];
    }
  },
  created() {
    this.searchDate = this.initSearchDate();
  }
};
</script>

<style lang="scss">
.m-wrap {
  position: absolute;
  top: 34px;
  right: 0;
  bottom: 0;
  left: 170px;
}
.m-container {
  padding: 20px;
  // 覆盖一些index.scss里任性的全局变量
  .el-form-item__content {
    line-height: 28px;
  }
  .el-input {
    width: 150px;
    height: 28px;
  }
  .el-input__inner {
    height: 28px;
  }
  .el-date-editor--daterange.el-input {
    width: 200px !important;
    height: auto;
  }
  .el-form-item {
    margin-bottom: 15px !important;
    height: auto;
  }
  .el-button {
    width: auto;
    height: auto;
    padding: 6px 15px;
  }
  .el-select .el-input .el-input__icon {
    top: 50%;
  }
  .el-select .el-input .el-icon-caret-top:before {
    color: #bfcbd9;
  }
  .el-breadcrumb__item:last-child .el-breadcrumb__item__inner {
    color: #3a3a3a;
  }
  .el-table .cell {
    white-space: normal;
    word-break: break-all !important;
    word-wrap: break-word !important;
  }
}
.m-content {
  padding: 20px;
  background: #fff;
  border-radius: 6px;
}
.m-breadcrumb {
  margin-bottom: 20px;
  font-size: 14px;
}
.m-pagination {
  margin: 20px auto 0;
  text-align: center;
}
</style>
